<template>
    <div class="role">
        <el-row :gutter="20" class="role_main">
            <el-col :span="6" class="role_main_left">
                <el-card class="role_main_left_list">
                    <div
                        @click="handleRoleSelect(role.id)"
                        v-for="role in roleList"
                        :key="role.id"
                        :class="[
                            'role-item',
                            selectRoleId === role.id ? 'role-item-active' : '',
                        ]"
                    >
                        <div><i class="el-icon-user"></i>{{ role.name }}</div>

                        <el-dropdown placement="bottom-start">
                            <i
                                class="iconfont icongengduo"
                                style="color: black !important;"
                            ></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    ><i class="el-icon-edit"></i
                                    >修改角色信息</el-dropdown-item
                                >
                                <el-dropdown-item>
                                    <i class="iconfont iconquanxianguanli-"></i>
                                    权限管理</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <span class="icon-add" @click="addRoleDialogVisible = true">
                        <i class="iconfont iconicon-test"></i>
                    </span>
                </el-card>
            </el-col>

            <el-col :span="18" class="role_main_right">
                <el-card class="role_main_right_list">
                    <el-row>
                        <span>管理员</span>
                    </el-row>

                    <el-row class="role_main_right_list_title">
                        <el-col :span="10">
                            <el-input
                                v-model="queryInfo.query"
                                size="small"
                                placeholder="搜索员工名"
                            >
                                <template slot="prepend">
                                    <i class="el-icon-search"></i>
                                </template>
                            </el-input>
                        </el-col>

                        <el-col :span="6" :offset="8">
                            <el-button size="small">添加员工</el-button>
                            <el-button size="small" @click="removeUsers"
                                >移除员工</el-button
                            >
                        </el-col>
                    </el-row>

                    <el-table
                        :data="userList"
                        @selection-change="handleTableSelectionChange"
                        class="role_main_right_list_table"
                    >
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column
                            prop="nickname"
                            label="姓名"
                        ></el-table-column>
                        <el-table-column prop="email" label="电子邮箱">
                            <template slot-scope="scope">
                                {{ scope.row.email || "未填写" }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="dname"
                            label="所属部门"
                        ></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-link
                                    icon="el-icon-edit"
                                    @click.prevent="
                                        openEditUserDialog(scope.row)
                                    "
                                ></el-link>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                        :current-page.sync="queryInfo.pagenum"
                        :page-size.sync="queryInfo.pagesize"
                        :page-sizes="[1, 2, 5, 10, 50]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>

        <!-- 添加角色弹框 -->
        <el-dialog
            title="新增角色"
            :visible.sync="addRoleDialogVisible"
            width="40%"
        >
            <el-form
                :model="addRoleForm"
                ref="addRoleFormRef"
                :rules="addRoleFormRule"
                size="small"
            >
                <el-form-item label="角色" prop="name">
                    <el-input v-model="addRoleForm.name"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="addRoleDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="addRole">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    async created() {
        await this.getRoleList();
        // 获取角色列表后，默认选中第一个角色
        this.selectRoleId = this.roleList[0].id;
        this.handleRoleSelect(this.selectRoleId);
    },
    data() {
        return {
            roleList: [],
            selectRoleId: 0,
            addRoleDialogVisible: false,
            addRoleForm: {
                name: "",
            },
            addRoleFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入角色名称",
                        trigger: "change",
                    },
                ],
            },
            queryInfo: {
                query: "",
                pagenum: 1,
                pagesize: 10,
            },
            total: 0,
            userList: [],
            multipleSelection: [],
        };
    },
    methods: {
        async addRole() {
            console.log("roleForm", this.roleForm);
            let res = await this.$http.post("/roles", this.addRoleForm);
            if (res.code !== 201) {
                this.$notify.error(res.message);
                return;
            }
            this.$notify.success("添加成功");
            this.getRoleList();
            // 关闭弹框
            this.addRoleDialogVisible = false;
        },
        async getRoleList() {
            const res = await this.$http.get("/roles");
            if (res.code !== 200) {
                this.$notify.error(res.message);
                return;
            }
            // 设置角色列表数据
            this.roleList = res.data;
        },
        handleRoleSelect(rid) {
            this.selectRoleId = rid;
            this.getUserList();
        },
        async getUserList() {
            // 发送请求，获取该角色下的用户
            let res = await this.$http.get(`/users?rid=${this.selectRoleId}`);
            this.userList = res.data;
        },
        async handleRoleMoreOperation(role) {
            console.log(role);
        },
        handleTableSelectionChange(selection) {
            // 当前选中的行
            this.multipleSelection = selection;
        },
        async removeUsers() {
            console.log("this.multipleSelection", this.multipleSelection);
            const ids = this.multipleSelection.map((item) => item.id).join(",");
            console.log("ids", ids);
            let res = await this.$http.delete(`/users?ids=${ids}`);
            // 删除失败
            if (res.code !== 204) {
                this.$notify.error(res.message);
                return;
            }
            // 删除成功，更新列表数据
            this.getUserList();
        },
    },
};
</script>

<style lang="less" scoped>
.role {
    height: 100%;

    &_main {
        height: 100%;

        &_left {
            height: 100%;

            &_list {
                height: 100%;
                position: relative;

                .role-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 10px 0;
                    font-size: 14px;
                    padding: 8px 15px;
                    border-radius: 5px;
                }

                .role-item-active {
                    background-color: #ddebfd;
                    color: #409eff;
                }

                .el-icon-user {
                    margin-right: 15px;
                }

                .icon-add {
                    position: absolute;
                    left: 25px;
                    bottom: 25px;
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    background-color: #409eff;
                    cursor: pointer;
                    line-height: 32px;
                    text-align: center;
                    border-radius: 50%;
                    color: #fff;
                    font-weight: 900;
                }
            }
        }

        &_right {
            height: 100%;

            &_list {
                height: 100%;

                &_title {
                    margin-top: 15px;
                }

                &_table {
                    margin-top: 15px;
                }

                .el-pagination {
                    margin-top: 15px;
                }
            }
        }
    }
}
</style>
